<!--cms_page_add页面-->
<template>
  <div>
    <el-form ref="pageForm" :model="pageForm" label-width="80px" :rules="pageFormRules">
      <el-form-item label="所属站点" prop="siteId">
        <el-select v-model="pageForm.siteId">
          <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="选择模板" prop="templateId">
        <el-select v-model="pageForm.templateId">
          <el-option v-for="item in templateList" :key="item.key" :label="item.templateName" :value="item.templateId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="页面名称" prop="pageName">
        <el-input v-model="pageForm.pageName"/>
      </el-form-item>
      <el-form-item label="别名" prop="pageAliase">
        <el-input v-model="pageForm.pageAliase"/>
      </el-form-item>
      <el-form-item label="访问路径" prop="pageWebPath">
        <el-input v-model="pageForm.pageWebPath"/>
      </el-form-item>
      <el-form-item label="物理路径" prop="pagePhysicalPath">
        <el-input v-model="pageForm.pagePhysicalPath"/>
      </el-form-item>
      <el-form-item label="类型" prop="pageType">
        <el-radio-group v-model="pageForm.pageType">
          <el-radio class="el-radio" label="0">静态</el-radio>
          <el-radio class="el-radio" label="1">动态</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addSubmit" icon="el-icon-check">提交</el-button>
        <el-button type="primary" @click="go_back" icon="el-icon-back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as siteApi from '../../site/api/site'
import * as templateApi from '../../template/api/template'
import * as cmsApi from '../api/cms'
export default {
  data () {
    return {
      siteList: '', // 站点列表下拉栏数据
      templateList: '', // 页面模板下拉选择数据
      pageForm: {
        siteId: '',
        templateId: '',
        pageName: '',
        pageAliase: '',
        pageWebPath: '',
        pageParameter: '',
        pagePhysicalPath: '',
        pageType: ''
      },
      pageFormRules: {
        siteId: [
          { required: true, message: '请选择站点ID', trigger: 'blur' }
        ],
        templateId: [
          { required: true, message: '请选择模板', trigger: 'blur' }
        ],
        pageName: [
          { required: true, message: '请输入页面名称', trigger: 'blur' }
        ],
        pageAliase: [
          { required: true, message: '请输入页面别名', trigger: 'blur' }
        ],
        pageWebPath: [
          { required: true, message: '请输入访问路径', trigger: 'blur' }
        ],
        pageParameter: [
          { required: true, message: '请输入参数', trigger: 'blur' }
        ],
        pagePhysicalPath: [
          { required: true, message: '请输入物理路径', trigger: 'blur' }
        ],
        pageType: [
          { required: true, message: '请选择页面类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 查询站点信息,填充下拉选择列表
    queryCmsSite () {
      siteApi.SiteList().then(response => {
        this.siteList = response.queryResult.list
      })
    },
    // 查询页面模板信息,填充下拉选择列表
    queryCmsTemplate () {
      templateApi.getCmsTemplateList().then(response => {
        this.templateList = response.queryResult.list
      })
    },
    // 页面提交按钮点击事件
    addSubmit () {
      // 校验表单
      this.$refs['pageForm'].validate((valid) => {
        if (valid) {
          // 确认提交信息
          this.$confirm('确定添加信息吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 发送请求添加信息
            cmsApi.pageAdd(this.pageForm).then(response => {
              if (response.success === true) {
                this.$message({
                  type: 'success',
                  message: '添加成功',
                  center: true,
                  showClose: true
                })
                this.$refs['pageForm'].resetFields()
              } else {
                this.$message({
                  type: 'error',
                  message: response.message,
                  center: true,
                  showClose: true
                })
              }
            })
          })
        } else {
          return false
        }
      })
    },
    // 返回按钮点击事件
    go_back () {
      // 路由跳转
      this.$router.push({
        path: '/cms/page/list',
        query: {
          // 取出上一个页面传递过来的参数
          page: this.$route.query.page,
          siteId: this.$route.query.siteId,
          pageAliase: this.$route.query.pageAliase
        }
      })
    }
  },
  mounted () {
    this.queryCmsSite()
    this.queryCmsTemplate()
  }
}
</script>

<style>
</style>
